<template>
    <div>

      
       <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 1" :key="item">
    
      <img src="../../assets/matebook-x.png" class="img1" >
      <img src="../../assets/matebook.png" class="img2" >
      <img src="../../assets/matebook-e.png" class="img3">
      <img src="../../assets/makebook-d.png" class="img4">
      <img src="../../assets/mateview-series.png" class="img5">
      <img src="../../assets/mateviewgt-nav.png" class="img6">
      <img src="../../assets/display-series-v1.png" class="img7">
      <div class="wz">
      <h2 class="wz1" @click="goAnchor('1')">MateBookX系列</h2> 
      <h2 class="wz2" @click="goAnchor('2')">MateBook系列</h2>
      <h2 class="wz3" @click="goAnchor('3')">MateBookE系列</h2>
      <h2 class="wz4" @click="goAnchor('4')">MateBookD系列</h2>
      <h2 class="wz5" @click="goAnchor('5')">MateView系列</h2>
      <h2 class="wz6" @click="goAnchor('6')">MateView系列</h2>
      <h2 class="wz7" @click="goAnchor('7')">Display系列</h2>
      
     
</div>
    </el-carousel-item>
  </el-carousel>

  <el-row id="1">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>高效办公，全能旗舰</p>
      </div>
      <div class="part2 bg_safe">
        <p>MateView 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt"> <h2>最新</h2></div>
    <div class="cc">14.2 英寸</div>
    <div class="bt1"><p>MateBook X Pro</p></div>
    <div class="bt2"><h2>3.1K 原色全面屏，轻薄高能，超级终端首次登陆笔记本，一拉即合，告别繁琐。</h2></div>
    <div class="bt3"><p>￥3999 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round @click="gm">立即购买</el-button></div>
    <img src="../../assets/c1.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row>
  <el-col :span="24">
     <div class="cc">13 英寸</div>
    <div class="btt1"><p>MateBook X</p></div>
    <div class="btt2"><h2>机身轻至 1 kg，纤薄程度超乎想象。出行随身便携，灵感随心而来。</h2></div>
    <div class="btt3"><p>￥6999 起</p></div>
    <div class="btt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
     <img src="../../assets/c2.jpg" class="btt5"> 
    <img src="../../assets/beijin.jpg" class="z">  
    
  </el-col>
</el-row>


  <el-row id="2">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>够高能，释放你的创作潜能</p>
      </div>
      <div class="part2 bg_safe">
        <p>MateBook 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt"> <h2>最热</h2></div>
     <div class="cc">14 英寸</div>
    <div class="bt1"><p>MateBook 14s</p></div>
    <div class="bt2"><h2>移动应用重磅登场，电脑也能畅玩 app。Evo 平台认证，高性能助力智慧办公。</h2></div>
    <div class="bt3"><p>￥6699 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c3.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row>
  <el-col :span="24">
    <div class="btt"> <h2>最热</h2></div>
     <div class="cc">13 英寸</div>
    <div class="btt1"><p>MateBook 13s</p></div>
    <div class="btt2"><h2>2.5K 高刷全面屏，办公娱乐都出彩。移动应用电脑也能用，开启笔记本全新生态。</h2></div>
    <div class="btt3"><p>￥6499 起</p></div>
    <div class="btt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
     <img src="../../assets/c4.jpg" class="btt5"> 
    <img src="../../assets/beijin.jpg" class="z">  
    
  </el-col>
</el-row>

 <el-row id="3">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>灵动形态，即刻进入高效状态</p>
      </div>
      <div class="part2 bg_safe">
        <p>MateBook E 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="bt"> <h2>最热</h2></div>
     <div class="cc">12.6 英寸</div>
    <div class="bt1"><p>MateBook E</p></div>
    <div class="bt2"><h2>灵巧形态，轻薄随行，OLED 原色全面屏，搭配 M-Pencil 手写笔和专属键盘，高效办公得心应手。</h2></div>
    <div class="bt3"><p>￥5999 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c4.png" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>


 <el-row id="4">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>好快好稳，你的办公娱乐好搭档</p>
      </div>
      <div class="part2 bg_safe">
        <p>MateBook D 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
       <div class="cc">14 英寸</div>
    <div class="bt1"><p>MateBook D 14</p></div>
    <div class="bt2"><h2>大电池长续航，信号稳网速快，性能高动力强，办公娱乐持久流畅。</h2></div>
    <div class="bt3"><p>￥4799 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c5.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row >
  <el-col :span="24">
    <div class="btt"> <h2>最热</h2></div>
     <div class="cc">15.6 英寸</div>
    <div class="btt1"><p>MateBook D 15</p></div>
    <div class="btt2"><h2>超大全面屏，不止带来巨幕般的沉浸影音体验，办公协作亦大有妙用。</h2></div>
    <div class="btt3"><p>￥4599 起</p></div>
    <div class="btt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
     <img src="../../assets/c6.jpg" class="btt5"> 
    <img src="../../assets/beijin.jpg" class="z">  
    
  </el-col>
</el-row>

 <el-row id="5">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>高效办公，全能旗舰</p>
      </div>
      <div class="part2 bg_safe">
        <p>MateView 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
       <div class="cc">28.2 英寸</div>
    <div class="bt1"><p>MateView</p></div>
    <div class="bt2"><h2>颠覆想象，智慧办公新体验</h2></div>
    <div class="bt3"><p>￥3999 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c7.png" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row id="6">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>高能玩家，视听享受</p>
      </div>
      <div class="part2 bg_safe">
        <p>MateView GT 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
       <div class="cc">34 英寸  Sound版</div>
    <div class="bt1"><p>MateView GT</p></div>
    <div class="bt2"><h2>MateView GT</h2></div>
    <div class="bt3"><p>￥3599 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c7.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row >
  <el-col :span="24">
       <div class="cc">34 英寸  标准版</div>
    <div class="bt1"><p>MateView GT</p></div>
    <div class="bt2"><h2>MateView GT</h2></div>
    <div class="bt3"><p>￥2699 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c8.jpg" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

<el-row id="7">
    <el-col :span="24">
      <div class="part bg_safe">
        <p>高清视界，真实还原</p>
      </div>
      <div class="part2 bg_safe">
        <p>Display 系列</p>
      </div>
      </el-col>
</el-row>

<el-row >
  <el-col :span="24">
       <div class="cc">23.8 英寸</div>
    <div class="bt1"><p>华为显示器 S 24</p></div>
    <div class="bt2"><h2>高清全面屏 | 莱茵护眼认证 | 可调节和支持壁挂</h2></div>
    <div class="bt3"><p>￥999 起</p></div>
    <div class="bt4"> <el-button round class="lj" @click="liaojie">了解更多</el-button>
     <el-button round  @click="gm">立即购买</el-button></div>
    <img src="../../assets/c9.png" class="bt5">
    <img src="../../assets/beijin.jpg" class="z">
  </el-col>
</el-row>

    </div>
</template>

<script>
export default {
  
    setup () {
        

        return {
        
        }
         
        
    },
    methods: {
      goAnchor(id) {
      var anchor = document.getElementById(id);
      anchor.scrollIntoView();
    },
    liaojie(){
      this.$router.push({name:'liaojie'})
    },
    gm(){
       this.$message('购买成功，即刻配送 ' )
    }
        },
        
        
}
</script>

<style lang="scss" scoped>
.img1{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 18%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;       
  cursor: pointer;
}
.img2{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
          cursor: pointer;
}
.img3{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img4{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img5{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img6{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.img7{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%,-50%);
      vertical-align: middle;
    max-height: 96px;
        border: 0;
        box-sizing: border-box;
}
.wz{
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 190px;
    padding-top: 200px;
     word-spacing: 98px;
}
.wz1{
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 230px;
    padding-top: 200px;
     word-spacing: 98px;
      cursor: pointer;
}
.wz2{
  left: 85px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 95px;
      cursor: pointer;

}
.wz3{
  left: 150px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 80px;
     cursor: pointer;
}
.wz4{
  left: 180px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz5{
  left: 215px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz6{
  left: 275px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.wz7{
  left: 340px;
        font-size: 14px;
    line-height: 19px;
    position: relative;
    display: inline-block;
    white-space: normal;
    padding-bottom: 4px;
    flex-direction: column;
    text-align: center;
    margin-left: 260px;
    padding-top: 200px;
     word-spacing: 98px;
     cursor: pointer;
}
.part{
  text-align: center;
  padding-top: 50px;
  font-size: 80px;
  font-weight: bolder;
}.part2{
  text-align: center;
  padding-top: 20px;
   font-size: 30px;
   
}
.bg_safe {
    background: #F3F7FB;
}
.z{
     width:1490px;
    height: 600px;
    padding-top: 10px;
    box-sizing: border-box;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
      position: relative;
}
.bt{
 
   left: 150px;
    position: absolute;
   padding-top: 180px;
   z-index: 1;
   color: rgb(205, 8, 8);
}
.cc{
     left: 230px;
    position: absolute;
   padding-top: 183px;
   z-index: 1;
   font-size: 22px;
}
.btt{
 
   right: 150px;
    position: absolute;
   padding-top: 180px;
   z-index: 1;
   color: rgb(205, 8, 8);
}
.bt1{
    left: 150px;
    position: absolute;
    z-index: 1;
     padding-top: 225px;
     font-size: 50px;
     font-weight: bolder;
}
.btt1{
    right: 150px;
    position: absolute;
    z-index: 1;
     padding-top: 225px;
     font-size: 50px;
     font-weight: bolder;
}
.bt2{
   left: 150px;
    position: absolute;
     padding-top: 350px;
      z-index: 1;
      font-size: 10px;
}
.btt2{
   right: 150px;
    position: absolute;
     padding-top: 350px;
      z-index: 1;
      font-size: 10px;
}
.bt3{
left: 150px;
    position: absolute;
    z-index: 1;
    padding-top: 380px;
}
.btt3{
right: 150px;
    position: absolute;
    z-index: 1;
    padding-top: 380px;
}
.bt4{
  left: 140px;
    position: absolute;
    z-index: 1;
    padding-top: 430px;
    .lj{
      background: #000;
      color: #F3F7FB;
    }
}
.btt4{
  right: 140px;
    position: absolute;
    z-index: 1;
    padding-top: 430px;
    .lj{
      background: #000;
      color: #F3F7FB;
    }
}
.bt5{
 width: 745px;
  height: 575px;
   left: 725px;
    position: absolute;
    z-index: 1;
    padding-top: 17px;
}
.btt5{
 width: 745px;
  height: 575px;
   right: 725px;
    position: absolute;
    z-index: 1;
    padding-top: 17px;
}
</style>